<template>
    <div class="app">
        <list class="list" ref="list">
            <cell>
                <div class="header">
                    <div class="header_bg_wrapper">
                        <image class="header_bg" resize="cover" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543544862&di=7ed57c7209d8c464bfe37ad4c0a5c638&imgtype=jpg&er=1&src=http%3A%2F%2Fa3.leadongcdn.cn%2Fcloud%2FklBonKjrSRqmomnkj%2FBANNERzutu.jpg" />
                    </div>
                    <div class="header_card">
                        <div class="card_wrapper">
                            <div class="card_content" style="background-color:#ffffff">
                            </div>
                        </div>
                    </div>
                </div>
            </cell>

            <cell v-for="(c,index) in cells" :key="index" >
                <div class="card_wrapper">
                    <div class="card_content" />
                </div>
            </cell>
        </list>

        <div class="app_bar" ref="app_bar">
            <div class="app_bar_bg" ref="app_bar_bg" />

            <!-- <div class="nav_wrapper">
            </div> -->

            <div class="tab_wrapper_container">
                <div class="tab_wrapper" v-for="(tab,index) in fake_tabs" :key="index">
                    <text class="tab">{{tab}}</text>
                </div>
            </div>
        </div>

    </div>
</template>

<style scoped>
    .app {
        flex: 1;
        justify-content: center;
        align-items: center;
        background-color: #E0E0E0;
    }

    .list {
        flex-direction: column;
        overflow: hidden;
        width: 750;
        background-color: #f2f3f4;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .header_bg {
        width: 750;
        height: 500;
    }

    .header_bg_wrapper {
        width: 750;
        height: 600;
        position: absolute;
        top: 0;
    }

    .header {
        width: 750;
        height: 600;
    }

    .header_card {
        margin-top: 330;
    }

    .app_bar {
        width: 750;
        height: 250;
        position: absolute;
        top: 0;
    }

    .app_bar_bg {
        width: 750;
        height: 100;
        background-color: #03A9F4;
        position: absolute;
        top: 0;
        opacity: 0;
    }

    .card_wrapper {
        width: 750;
        height: 250;
        margin-top: 20;
        justify-content: center;
        align-items: center;
        background-color: transparent;
    }

    .card_content {
        border-radius: 25;
        width: 710;
        height: 250;
        background-color: #898989;

    }

    .nav_wrapper {
        width: 750;
        height: 100;
        align-items: center;
        background-color: transparent;
        flex-direction: row;
    }

    .nav_title {
        font-size: 35;
        font-weight: bold;
        margin-left: 250;
        color: #ffffff;
    }

    .nav_back {
        width: 40;
        margin-left: 20;
        height: 40;
    }

    .tab_wrapper_container {
        width: 750;
        height: 100;
        align-items: center;
        background-color: transparent;
        flex-direction: row;
    }

    .tab_wrapper {
        width: 125;
        height: 100;
        align-items: center;
        justify-content: center;
    }

    .tab {
        font-size: 25;
        color: #ffffff;
    }

</style>

<script>
    export default {
        data() {
            return {
                fake_tabs: [
                    'Tab1',
                    'Tab2',
                    'Tab3',
                    'Tab4',
                    'Tab5',
                    'Tab6'
                ],
                cells: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        },
        created(){
            this.$navigator.setLeftItem({
                text: '返回', // 展示的文字 (和图片 二选一)    
                textColor: '', // 文字颜色 (默认为白色)
                fontSize: '32', // 字号（默认32px）
                fontWeight: 'normal', // 是否加粗（默认不加粗）
                image: '' // 展示的图片url (和文字 二选一，文字优先级更高)
            }, () => {
                // 点击回调
                this.$router.back({
                    type:'PUSH'
                })
            })
        },
        mounted() {
            let self = this;
            let list = this.getEl(self.$refs.list);
            let target_app_bar = this.getEl(self.$refs.app_bar);
            let target_bg = this.getEl(self.$refs.app_bar_bg);

            self.$bindingx.bind({
                eventType: 'scroll',
                anchor: list,
                props: [{
                        element: target_bg,
                        property: 'opacity',
                        expression: {
                            origin: 'min(100,y)/100'
                        }
                    },
                    {
                        element: target_app_bar,
                        property: 'transform.translateY',
                        expression: {
                            origin: 'y<100?0:0'
                        }
                    }
                ]
            });
        },
        methods: {
            getEl: function (e) {
                return e.ref;
            }

        }
    }

</script>
